<template>
	<el-form ref="formRef" :model="formModel" :rules="formRules" v-bind="$attrs">
		<el-row>
			<el-col v-for="(column, index) in formColumns" :key="index" :span="column.span" :offset="column.offset">
				<template v-if="column.slotName">
					<slot :name="column.slotName"></slot>
				</template>
				<el-form-item v-else :label="column.label" :prop="column.prop">
					<component :is="componentsTypes[column.xType]" v-bind="column" v-model="formModel[column.prop]"> </component>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { markRaw, ref, reactive } from 'vue'
import Input from './components/XmwInput.vue'
import Select from './components/XmwSelect.vue'
import { FormInstance } from 'element-plus'
const props = defineProps({
	// 表单配置项
	formColumns: {
		type: Array as any,
		default: () => []
	},
	// // 表单规则验证
	formRules: {
		type: Object,
		default: () => {}
	}
})
// 定义表单动态model
const formModel = reactive<{ [propName: string]: any }>({})
const formData: Array<string> = props.formColumns.filter((item: any) => item.prop)
// 过滤model
formData.forEach((element: any) => (formModel[element] = ''))

// 定义动态组件
const componentsTypes: any = markRaw({
	Input,
	Select
})

// 将表单绑定的ref暴露给父组件
const formRef = ref<FormInstance>()
defineExpose({ formRef, formModel })
</script>

<style scoped></style>
